<script setup lang="ts">
import { ref, markRaw } from 'vue'
import type { Component } from 'vue'
import { ElButton } from 'element-plus'

// 导入页面组件
import ShopManagementView from '../views/ShopManagementView.vue'
import LineView from '../views/LineView.vue'
import WorkstationView from '../views/WorkstationView.vue'

const activeComponent = ref<Component | null>(null)
const handleMenuClick = (component: Component) => {
    activeComponent.value = markRaw(component);
};

// 路由与状态管理
import { useRouter } from 'vue-router'
import { useCounterStore } from '@/stores/counter'
const router = useRouter()
const store = useCounterStore()
const erty = () => {
    store.usercount.userId = 0,
        store.usercount.loginAccoun = "",
        store.usercount.realName = "",
        store.usercount.roleId = 0,
        store.usercount.roleName = "",
        store.usercount.token = "",
        router.push('/')
}
</script>

<template>
    <div class="app-container">
        <!-- 侧边栏 - 靠左显示 -->
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo sidebar"
            default-active="2" text-color="#fff">
            <el-sub-menu index="1">
                <template #title>
                    <span>基础数据</span>
                </template>
                <el-sub-menu index="1-0">
                    <template #title>
                        <span>工厂建模</span>
                    </template>
                    <el-menu-item @click="() => handleMenuClick(ShopManagementView)">车间管理</el-menu-item>
                    <el-menu-item @click="() => handleMenuClick(LineView)">产线管理</el-menu-item>
                    <el-menu-item @click="() => handleMenuClick(WorkstationView)">工位管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="1-4">
                    <template #title>
                        <span>物料管理</span>
                    </template>
                    <el-menu-item index="1-4-1">物料群组</el-menu-item>
                    <el-menu-item index="1-4-2">产品物料</el-menu-item>
                    <el-menu-item index="1-4-3">BOM</el-menu-item>
                    <el-menu-item index="1-4-4">替代料管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="1-5">
                    <template #title>
                        <span>不良信息维护</span>
                    </template>
                    <el-menu-item index="1-5-1">不良类型</el-menu-item>
                    <el-menu-item index="1-5-2">不良现象</el-menu-item>
                    <el-menu-item index="1-5-3">维修方法</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="1-6">技能管理</el-menu-item>
                <el-menu-item index="1-7">供应商管理</el-menu-item>
                <el-menu-item index="1-8">客户管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>
                    <span>工艺路线</span>
                </template>
                <el-menu-item index="2-1">工序维护</el-menu-item>
                <el-menu-item index="2-2">工序路线</el-menu-item>
            </el-sub-menu>
        </el-menu>

        <!-- 页面右上角元素（无外层框） -->
        <div class="page-top-right">
            <span class="user-name">{{ store.usercount.realName || '张三' }}</span>
            <el-button type="text" @click="erty">退出</el-button>
        </div>

        <!-- 主内容区域：动态渲染选中的组件 -->
        <main>
            <component :is="activeComponent || 'div'" />
        </main>
    </div>
</template>

<style scoped>
.app-container {
    display: flex;
    min-height: 100vh;
    position: relative;
    /* 为固定定位元素提供参考 */
}

.sidebar {
    width: 200px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #545c64;
}

/* 页面右上角元素：去掉背景/边框/阴影，仅保留元素排列 */
.page-top-right {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 20;
    /* 确保在侧边栏上层 */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    /* 仅保留垂直内边距，优化间距 */
}

.user-name {
    font-size: 14px;
    color: #333;
}

/* 主内容区域：避开侧边栏 + 顶部元素 */
main {
    flex: 1;
    margin-left: 210px;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 40px;
    /* 给右上角元素留出垂直空间 */
}

/* 原有 nav 样式保持 */
nav {
    width: 100%;
    font-size: 12px;
    text-align: center;
    margin-top: 2rem;
}

nav a.router-link-exact-active {
    color: var(--color-text);
}

nav a.router-link-exact-active:hover {
    background-color: transparent;
}

nav a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
    border: 0;
}

@media (min-width: 1024px) {
    nav {
        text-align: left;
        margin-left: -1rem;
        font-size: 1rem;
        padding: 1rem 0;
        margin-top: 1rem;
    }
}
</style>